<template>
  <div class="page">
    <div class="body">
      <div class="bgc">
        <div class="bgc_1"></div>
        <div class="bgc_2"></div>
      </div>
      <header class="header">
        
        <div class="info" @click="goTo('Set')">
          <img :src="tx_src" alt class="info-img" />
          <div class="info-right">
            <div class="number">
              <!-- <span>{{myAssetsData&&myAssetsData.nickname}}</span>  -->
              <span>{{myAssetsData&&myAssetsData.nickname}}</span> 
              <span>{{myAssetsData&&myAssetsData.levelname}}</span> 
              <span>{{myAssetsData&&myAssetsData.identity_level}}</span>
            </div>
            <!-- <div>ID:{{uid}}</div> -->
          </div>
        </div>


        
        <div class="sm_top">
          <div class="top_1">
            {{langText&&langText.myassets}}
            <i class="iconfont iconyanjing mark" @click="ys = !ys"></i>
          </div>
          <div class="top_2" v-show="ys">
            <div class="left">
              <p class="title">{{langText&&langText.fc}}</p>
              <!-- <p>{{myAssetsData.lock_fc}}</p> -->
              <p>{{(myAssetsData.fc)}}</p>
            </div>
            
            <div class="right">
              <p class="title">{{langText&&langText.usdt}}</p>
              <!-- <p>{{myAssetsData.lock_usdt}}</p> -->
              <p>{{(myAssetsData.usdt)}}</p>
            </div>
          </div>
          
          <div class="top_2" v-show="!ys">
            <div class="left">  
              <p class="title">{{langText&&langText.fc}}</p>
              <p>******</p>
            </div>
            
            <div class="right">
              <p class="title">{{langText&&langText.usdt}}</p>
              <p>******</p>
            </div>
          </div>


        </div>

        <!-- <div class="sm_centre">
          <ul class="centre_list">
            <li class="centre_item" v-for="(item,index) in centre_list" :key="index" @click="$router.push({name:item.route})">
              <img :src="item.img" alt="">
              <p>{{item.name}}</p>
            </li>
          </ul>
        </div> -->

      </header>

      <ul class="list-wrap">
        <li class="list" v-for="(item, index) in list" :key="index" @click="goTo(item.route)">
          <!-- <img :src="item.img" class="list-img" /> -->
          <i :class="item.i_cla"></i>
          <div class="list-right">
            <span>{{item.name}}</span>
            <img src="../../assets/images/szxz/jt.png" class="right-img" />
          </div>
        </li>
        <!-- <li class="list" @click="toQuit">
          <img src="../../assets/images/szxz/tab_icon_sy_pre.png" class="list-img" />
          <div class="list-right">
            <span>注销登录</span>
            <img src="../../assets/images/szxz/jt.png" class="right-img" />
          </div>
        </li>-->
      </ul>
    </div>
    <m-load ref="load"></m-load>
    <m-Footer></m-Footer>
  </div>
</template>
<script>
import { Util, Load } from "@/assets/commonjs/utils.js";
import { MyTxt } from "@/assets/commonjs/lan.js";
import { Init, Base, Owner } from "@/server/server.js";
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      centre_list:[
        {
          name: "我的资产",
          img: require("../../assets/images/hzlz/my_icon_wdzc.png"),
          route: "Assets"
        },
        {
          name: "我的收益",
          img: require("../../assets/images/hzlz/my_icon_wdsy.png"),
          route: "Earnings"
        },
        {
          name: "邀请好友",
          img: require("../../assets/images/hzlz/my_icon_slcc.png"),
          route: "Invite"
        },
        {
          name: "我的团队",
          img: require("../../assets/images/hzlz/my_icon_sc.png"),
          route: "MyTeam"
        },
        {
          name: "闪兑",
          img: require("../../assets/images/hzlz/my_icon_ylc.png"),
          route: "Convert"
        },
        {
          name: "我的算力套餐",
          img: require("../../assets/images/hzlz/my_icon_slb.png"),
          route: "Setmeal"
        },
      ],
      list: [
        // {
        //   name: "在线留言",
        //   img: require("../../assets/images/szxz/wdjqr.png"),
        //   i_cla:"iconfont iconjishiben mark",
        //   route: "Message"
        // },
        {
          name: "个人中心",
          img: require("../../assets/images/szxz/zskf.png"),
          i_cla:"iconfont icontab_icon_my mark",
          route: "Set"
        },
        {
          name: "支付绑定",
          img: require("../../assets/images/szxz/bzzx.png"),
          i_cla:"iconfont iconwenhao mark",
          route: "PayInfo"
        },
        // {
        //   name: "帮助中心",
        //   img: require("../../assets/images/szxz/bzzx.png"),
        //   i_cla:"iconfont iconwenhao mark",
        //   route: "Help"
        // },
        // {
        //   name: "关于我们",
        //   img: require("../../assets/images/szxz/gywm.png"),
        //   i_cla:"iconfont icongantanhao mark",
        //   route: "About"
        // }
      ],
      email: null,
      langText:null,
      userAssets: {},
      MyHome: {},
      fc:null,
      usdt:null,
      allTxt:null,
      ys:true,
      tx_src:require('@/assets/images/touxiang.png'),
      data:{
        fc:null,
        usdt:null,
        lock_fc:null,
        lock_usdt:null,
        sf_lock_fc:null,
      },
      myAssetsData:{
        fc:null,
        usdt:null,
        realname:null,
        levelname:null,
        identity_level:null,
        nickname:null,
        lock_fc:null,
        lock_usdt:null,
      }
    };
  },
  computed: {
    ...mapGetters(["uid","userInfo",'getLangId'])
  },
  created() {
    this.email = this.userInfo.realname;
    this.getRate();
  },
  mounted(){
    this.getlang();
    this.myAssets();
    this.initData();
    // console.log(this.userInfo)
  },
  methods: {
    goTo(name) {
      this.$router.push({ name: name });
    },
    getlang(){
      Base.getlang().then(res=>{
        if(res.code==1){
          this.langText = Object.assign({},res.data.mine,res.data.currency,res.data.nodepower,res.data.prompt,res.data.tradingcenter)
          
            this.centre_list[0].name = this.langText&&this.langText.myassets;
            this.centre_list[1].name = this.langText&&this.langText.myincome;
            this.centre_list[2].name = this.langText&&this.langText.invitefriends;
            this.centre_list[3].name = this.langText&&this.langText.myteam;
            this.centre_list[4].name = this.langText&&this.langText.flash;
            this.centre_list[5].name = this.langText&&this.langText.mycp;

            
            // this.list[0].name = this.langText&&this.langText.onlinemessage;
            this.list[0].name = this.langText&&this.langText.personalcenter;
            // this.list[2].name = this.langText&&this.langText.helpcenter;
            // this.list[3].name = this.langText&&this.langText.aboutus;
          // console.log(this.langText,11111111)
          setTimeout(()=>{
            localStorage.setItem('mineData',JSON.stringify(this.langText));
          },200)
        }else{
          mui.toast(res.msg)
        }
      })
    },
    initData(){
      this.allTxt = Object.assign({},MyTxt)
      this.allTxt = Object.assign({},MyTxt)
    },
    myAssets(){
      Owner.myAssets().then(res=>{
        if(res.code==1){
          // this.fc = res.data.fc
          // this.usdt = res.data.usdt
          this.myAssetsData = res.data;
        }else{
          mui.toast(res.msg)
        }
      })
    },
    //获取用户资产
    getRate() {
      Owner.getRate({ id: this.uid }).then(res => {
        if (res.code == 1) {
          this.userAssets = res.data;
        }
      });
    }
  }
};
</script>
<style lang="less" scoped>
@import "~link-less";
.body {
  // padding: @margin-primary;
  background-color: @bg-color;
  
  .bgc{
    width: 100%;
    height: 0;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -99;
    .bgc_1{
      width: 100%;
      // position: absolute;
      background-color: #4EB6AD;
      height: 350px;
    }
    .bgc_2{
      width: 140%;
      background-color: #4EB6AD;
      border-radius: 100%;
      height: 200px;
      margin-left: -20%;;
      margin-top: -150px;
      // bottom: 0;
    }
  }
  .header {
    padding: 30px;
    // border-bottom: 20px solid #f3f3f3;
    .info {
      .display-flex();
      align-items: center;
      .info-img {
        margin-right: 20px;
        // width: 120px;
        // height: 120px;
        width: 58px;
        height: 58px;
      }
      .info-right {
        flex: 1;
        .number {
          // color: #406ec3;
          display: flex;
          justify-content: space-between;
          color: #fff;
          font-size: 24px;
        }
      }
    }
    .sm_top{
      text-align: center;
      color: #fff;
      margin-top: 25px;
      .top_1{
        font-size: 32px;
      }
      .top_2{
        // display: flex;
        p{ color: #fff; }
        div{
          margin-top: 40px;
          width: 49%;
          display: inline-block;
          font-size: 28px;
          font-weight: 400;
          .title{
            font-size: 40px;
            font-weight: 550;
          }
          &:last-child{
            border-left: 1px solid #fff;
          }
        }
      }
    }
    .sm_centre{
      margin-top: 30px;
      p{ color: #000 }
      .centre_list{
        width: 690px;
        background-color: #fff;
        border-radius: 10px;
        padding: 10px 0 35px;
        .centre_item{
          display: inline-block;
          width: 32.3%;
          text-align: center;
          margin-top: 30px;
          img{
            width: 50px;
            height: 50px;
          }
        }
      }
    }
  }
  .list-wrap {
    // border-bottom: 20px solid #f3f3f3;
    background-color: #fff;
    border-radius: 10px;
    margin: 30px;
    width: 690px;
    padding: 0 20px;
      
    .list {
      padding: 22px 30px;
      .display-flex();
      align-items: center;
      border-bottom: 1px solid #eee;
      height: 120px;
      line-height: 120px;
      i{
        font-size: 44px;
        margin-right: 10px;
      }
    
      &:nth-child(2n-1){ .mark{ color: #4EB6AD } }
      &:nth-child(2n){ .mark{ color: #8498E3 } }
      
      .list-img {
        width: 60px;
        height: 60px;
        margin-right: 32px;
      }
      .list-right {
        flex: 1;
        .display-flex();
        justify-content: space-between;
        align-items: center;
        color: #333;
        font-size: 34px;
        span{
          font-size:32px !important;
          font-weight:400;
          color:rgba(51,51,51,1);
        }
        .right-img {
          width: 16px;
          height: 26px;
          opacity: 0.4;
        }
      }
      &:last-child {
        border: none;
      }
    }
  }
}
</style>